<template>
  <el-form :model="formData" label-width="180px" ref="form" v-loading="loading" class="pr-4">
    <el-form-item label="套餐ID" prop="package_id"  :rules="[{required: true,message: '套餐ID必选'}]">
      <el-select v-model="formData.package_id" placeholder="请选择">
        <el-option
          v-for="item in packageList"
          :key="item.id"
          :label="item.id + ' / ' + item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
<!-- <el-form-item label="拦截状态" prop="intercept_status" :rules="[{required: true,message: '拦截状态必选'}]">
  <el-select v-model="formData.intercept_status" placeholder="请选择">
        <el-option
          v-for="item in inteStatus"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
</el-form-item>
<el-form-item label="拦截信息" prop="intercept_msg" >
  <el-input v-model="formData.intercept_msg" name="intercept_msg" clearable />
</el-form-item> -->
<el-form-item label="订单提单同步状态" prop="api_sync" :rules="[{required: true,message: '订单提单同步状态必选'}]">
      <el-select v-model="formData.api_sync" placeholder="请选择">
        <el-option
          v-for="item in syncStatus"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
</el-form-item>
<el-form-item label="运营商校验" prop="api_valid" :rules="[{required: true,message: '运营商校验必选'}]">
      <el-select v-model="formData.api_valid" placeholder="请选择">
        <el-option
          v-for="item in validStatus"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
</el-form-item>
<!-- <el-form-item label="同步接口锁定时间" prop="api_lock" >
            <el-date-picker
              v-model="formData.api_lock"
              type="datetime"
              format="YYYY/MM/DD hh:mm"
              value-format="YYYY-MM-DD h:m"
              placeholder="同步接口锁定时间"
            />
</el-form-item> -->
<el-form-item label="运营商订单号" prop="api_order_no" >
  <el-input v-model="formData.api_order_no" name="api_order_no" clearable />
</el-form-item>
<el-form-item label="外部订单号（各销售平台）" prop="business_order_no" >
  <el-input v-model="formData.business_order_no" name="business_order_no" clearable />
</el-form-item>
<el-form-item label="订单号" prop="order_no">
  <el-input v-model="formData.order_no" name="order_no" clearable />
</el-form-item>
<!-- <el-form-item label="订单状态" prop="status" :rules="[{required: true,message: '订单状态必须填写'}]">
  <el-input v-model="formData.status" name="status" clearable />
</el-form-item> -->
<el-form-item label="开卡号码" prop="phonenum">
  <el-input v-model="formData.phonenum" name="phonenum" clearable />
</el-form-item>
<el-form-item label="收货人姓名" prop="contact" :rules="[{required: true,message: '收货人姓名必须填写'}]">
  <el-input v-model="formData.contact" name="contact" clearable />
</el-form-item>
<el-form-item label="联系电话" prop="mobile" :rules="[{required: true,message: '联系电话必须填写'}]">
  <el-input v-model="formData.mobile" name="mobile" clearable />
</el-form-item>
<el-form-item label="身份证号码" prop="iden_card_id" :rules="[{required: true,message: '身份证号码必须填写'}]">
  <el-input v-model="formData.iden_card_id" name="iden_card_id" clearable />
</el-form-item>
<el-form-item label="身份证姓名" prop="iden_card_name" :rules="[{required: true,message: '身份证姓名必须填写'}]">
  <el-input v-model="formData.iden_card_name" name="iden_card_name" clearable />
</el-form-item>
<el-form-item label="开卡状态" prop="open_status" :rules="[{required: true,message: '开卡状态必须填写'}]">
  <el-select v-model="formData.open_status" placeholder="请选择">
        <el-option
          v-for="item in openStatus"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
</el-form-item>
<el-form-item label="开卡信息" prop="open_message" >
  <el-input v-model="formData.open_message" name="open_message" clearable />
</el-form-item>
<el-form-item label="发货状态" prop="express_status" :rules="[{required: true,message: '发货状态必选'}]">
      <el-select v-model="formData.express_status" placeholder="请选择">
        <el-option
          v-for="item in expressStatus"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
</el-form-item>
<el-form-item label="快递单号" prop="express_no">
  <el-input v-model="formData.express_no" name="express_no" clearable />
</el-form-item>
<el-form-item label="快递名称" prop="express_name">
  <el-input v-model="formData.express_name" name="express_name" clearable />
</el-form-item>
<!-- <el-form-item label="身份证正面" prop="idcard_front">
  <el-input v-model="formData.idcard_front" name="idcard_front" clearable />
</el-form-item>
<el-form-item label="身份证反面" prop="idcard_back">
  <el-input v-model="formData.idcard_back" name="idcard_back" clearable />
</el-form-item>
<el-form-item label="手持证件照" prop="user_with_idcard">
  <el-input v-model="formData.user_with_idcard" name="user_with_idcard" clearable />
</el-form-item> -->
<el-form-item label="收货地址" prop="express_address" :rules="[{required: true,message: '收货地址必须填写'}]">
  <el-input v-model="formData.express_address" name="express_address" clearable />
</el-form-item>
<el-form-item label="备注" prop="remark">
  <el-input v-model="formData.remark" name="remark" clearable />
</el-form-item>
<el-form-item label="激活状态" prop="active_status" :rules="[{required: true,message: '激活状态必选'}]">
      <el-select v-model="formData.active_status" placeholder="请选择">
        <el-option
          v-for="item in activeStatus"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
</el-form-item>
<el-form-item label="激活时间" prop="active_time">
            <el-date-picker
              v-model="formData.active_time"
              type="datetime"
              format="YYYY/MM/DD hh:mm"
              value-format="YYYY-MM-DD h:m"
              placeholder="激活时间"
            />
</el-form-item>
<!-- <el-form-item label="首充状态" prop="first_charge_status" >
  <el-select v-model="formData.first_charge_status" placeholder="请选择">
        <el-option
          v-for="item in firstStatus"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
</el-form-item>
<el-form-item label="首充时间" prop="first_charge_time">
            <el-date-picker
              v-model="formData.first_charge_time"
              type="datetime"
              format="YYYY/MM/DD hh:mm"
              value-format="YYYY-MM-DD h:m"
              placeholder="首充时间"
            />
</el-form-item>
<el-form-item label="首充金额" prop="first_charge_amount">
  <el-input v-model="formData.first_charge_amount" name="first_charge_amount" clearable />
</el-form-item> -->
    <div class="flex justify-end">
      <el-button type="primary" @click="submitForm(form)">{{ $t('system.confirm') }}</el-button>
    </div>
  </el-form>
</template>

<script lang="ts" setup>
import { useCreate } from '@/composables/curd/useCreate'
import { useShow } from '@/composables/curd/useShow'
import http from '@/support/http';
import { onMounted , ref } from 'vue'

const props = defineProps({
  primary: [String, Number],
  api: String,
})

const inteStatus = ref([{ value: 1, label: '拦截' },{value:2,label:'未拦截'}])
const syncStatus = ref([{ value: 1, label: '已同步' },{value:2,label:'未同步'}])
const validStatus = ref([{ value: 1, label: '已校验' },{value:2,label:'未校验'}])
const expressStatus = ref([{ value: 1, label: '已发快递' },{value:2,label:'未发货'}])
const activeStatus = ref([{ value: 1, label: '已激活' },{value:2,label:'未激活'}])
const openStatus  =  ref([{ value: 1, label: '待开卡' },{value:2,label:'开卡中'},{ value: 3, label: '开卡成功' },{value:4,label:'开卡失败'},{ value: 5, label: '开卡异常' }])
const firstStatus = ref([{ value: 1, label: '已充值' },{value:2,label:'待充值'}])
const packageList = ref([])


const { formData, form, loading, submitForm, close } = useCreate(props.api, props.primary)

if (props.primary) {
  useShow(props.api, props.primary, formData)
}

const emit = defineEmits(['close'])
onMounted(() => {
  close(() => emit('close'))
  http.get('package/package').then(r => {
    packageList.value = r.data.data
  })
})
</script>
